<script lang="ts" setup>
import { updatePassword } from '@/api/userInfo'
import { useToast } from 'wot-design-uni'

defineOptions({ name: 'PopPasswordSetting' })
const toast = useToast()
const show = ref(false)
const form_ref = ref()
const model = reactive<{
  oldPassword: string
  password: string
  confirmPassword: string
}>({
  oldPassword: '',
  password: '',
  confirmPassword: '',
})
const rules = {
  oldPassword: [
    {
      required: true,
      message: '请输入旧密码',
      validator: (value) => {
        if (value && value.length > 3 && value.length < 17) {
          return Promise.resolve()
        } else {
          return Promise.reject('密码限制4-16个字符')
        }
      },
    },
  ],
  password: [
    {
      required: true,
      message: '请输入新密码',
      validator: (value) => {
        if (value && value.length > 3 && value.length < 17) {
          return Promise.resolve()
        } else {
          return Promise.reject('密码限制4-16个字符')
        }
      },
    },
  ],
  confirmPassword: [
    {
      required: true,
      message: '请再次输入新密码',
      validator: (value) => {
        if (value && value === model.password) {
          return Promise.resolve()
        } else {
          return Promise.reject('两次输入密码不一致')
        }
      },
    },
  ],
}
const open = () => {
  show.value = true
}

const handleClose = () => {
  model.oldPassword = ''
  model.password = ''
  model.confirmPassword = ''
  show.value = false
}
const submit = () => {
  form_ref.value.validate().then(async ({ valid, errors }) => {
    if (valid) {
      const { oldPassword, password } = model
      const dataParam = {
        oldPassword,
        password,
      }
      const res = await updatePassword(dataParam)
      if (res.code === 0) {
        toast.success({ msg: '密码设置成功！' })
        setTimeout(() => {
          handleClose()
        }, 500)
      }
    }
  })
}

defineExpose({
  open,
})
</script>

<template>
  <JediPagePop
    v-model="show"
    title="设置密码"
    custom-class="bgGray"
    @close="handleClose"
  >
    <view class="m-2">
      <wd-form ref="form_ref" :model="model" :rules="rules">
        <wd-cell-group border>
          <wd-input
            v-model="model.oldPassword"
            label="旧密码"
            label-width="100px"
            prop="oldPassword"
            clearable
            show-password
            :maxlength="16"
            placeholder="请输入旧密码"
          />
          <wd-input
            v-model="model.password"
            label="新密码"
            label-width="100px"
            prop="password"
            clearable
            show-password
            :maxlength="16"
            placeholder="请输入新密码"
          />
          <wd-input
            v-model="model.confirmPassword"
            label="确认密码"
            label-width="100px"
            prop="confirmPassword"
            clearable
            show-password
            :maxlength="16"
            placeholder="再次输入确认密码"
          />
          <wd-cell title-width="0px">
            <view class="footer">
              <wd-button block size="large" @click="submit">
                设置密码
              </wd-button>
            </view>
          </wd-cell>
        </wd-cell-group>
      </wd-form>
    </view>
  </JediPagePop>
</template>
